<template>
  <div class="Login">
    <van-nav-bar
      title="注册"
      left-text="返回"
      right-text="登录"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push('/login')"
    />
    <div class="content">
      <div class="img">
        <img src="@/assets/images/logo.jpg" alt="" style="width: 100%" />
      </div>
      <div class="form">
        <!-- <p>用户名：<input type="text" v-model="user.userid" /></p>
      <p>密码：<input type="password" v-model="user.pwd" /></p> -->
        <!-- <p><input type="button" value="登录" @click="login" /></p> -->
        <!-- <van-button type="primary" size="large" @click="login">登录</van-button>
      <p><router-link to="/register">去注册</router-link></p> -->
        <van-form @submit="Register">
          <van-cell-group inset style="height: 3rem">
            <van-field
              v-model="user.userid"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="user.email"
              name="邮箱"
              label="邮箱"
              placeholder="邮箱"
              :rules="[{ required: true, message: '请填写邮箱' }]"
            />
            <van-field
              v-model="user.userpwd"
              type="ema"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16px" @click="beforeLogin">
            <van-button round block type="primary" native-type="submit">
              注册
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { register } from "@/api/User";
import { Notify } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
const user = ref({
  userid: "",
  email: "",
  userpwd: "",
});
const router = useRouter();
const Register = () => {
  register(user.value)
    .then((res) => {
      if (res.data.status) {
        Notify({ type: "success", message: res.data.msg });
        router.push("/login");
      } else {
        alert(res.data.msg);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<script>
// import { login } from "@/api/User.js";
// import { Toast } from "vant";
// export default {
//   data() {
//     return {
//       user: {
//         fmdo: "login",
//         dopost: "login",
//         userid: "",
//         pwd: "",
//       },
//       isSure: false,
//     };
//   },
//   computed: {
//     canLogin() {
//       if (this.user.userid !== "" && this.user.pwd !== "" && this.isSure) {
//         return false;
//       } else {
//         return true;
//       }
//     },
//   },

//   methods: {
//     beforeLogin() {
//       if (!this.isSure) {
//         Toast("请先阅读用户条款");
//       }
//     },
//     lgin() {
//       if (!this.canLogin) {
//         login(this.user, { loading: { message: "正在加载中...." } })
//           .then((res) => {
//             // console.log(res.data);
//             if (res.data.status) {
//               alert(res.data.msg);
//               //存入sesion用来判断是否登录
//               sessionStorage.setItem("islog", true);
//               var redirect = this.$route.query.redirect || "/";
//               this.$router.push(redirect);
//             } else {
//               alert(res.data.msg);
//             }
//           })
//           .catch((err) => {
//             console.log(err);
//           });
//       }
//     },
//   },
// };
</script>

<style scoped>
.Login .content {
  padding-top: 0.5rem;
}
.content .img {
  width: 1.9rem;
  height: 1.9rem;
  margin: 0.4rem auto;
}
.content .isSure {
  padding: 0.2rem 0.4rem;
  text-align: center;
}
</style>
